<!-- pages/my/index.vue -->
<script setup lang="ts">
  import { userInfoApi } from '@/apis/user'
  import type { UserData, UserType } from '@/types/user'
  import { onLoad } from '@dcloudio/uni-app'
  import { ref } from 'vue'
  import { useUserStore } from '@/stores/user'
  const store = useUserStore()

  // 1. 获取用户信息
  const userInfo = ref({} as UserData)

  const getUserInfo = async () => {
    // 调用接口获取用户信息
    const data = await userInfoApi()
    // 渲染用户数据
    userInfo.value = data
  }

  // getUserInfo() // setup

  onLoad(() => {
    // aboutToAppear
    getUserInfo()
  })

  // 退出
  const logout = async () => {
    // 无论取消确认  都是成功的promise
    // promise的结果里能区别
    const res = await uni.showModal({
      title: '温馨提示',
      content: '您确认出去么',
      showCancel: true,
      cancelText: '再想想',
      cancelColor: '#88ddff',
      confirmText: '狠心离开',
      confirmColor: '#3CC51F',
    })
    // console.log(res)
    if (res.confirm) {
      uni.showToast({ title: '登出成功' })
      store.setUser({} as UserType)
      uni.reLaunch({ url: '/pages/login/index' }) // 关闭所有页面栈  以当前路径打开项目
    }
  }
</script>

<!-- pages/my/index.vue -->
<template>
  <scroll-view background-color="#F6F7F9">
    <view class="my-page">
      <!-- 用户资料（头像&昵称） -->
      <view class="user-profile">
        <image class="user-avatar" :src="userInfo.avatar"></image>
        <view class="user-info">
          <text class="nickname">{{ userInfo.account }}</text>
          <text class="iconfont icon-edit"></text>
        </view>
      </view>
      <!-- 用户数据 -->
      <view class="user-data">
        <navigator hover-class="none" url=" ">
          <text class="data-number">{{ userInfo.collectionNumber }}</text>
          <text class="data-label">收藏</text>
        </navigator>
        <navigator hover-class="none" url=" ">
          <text class="data-number">{{ userInfo.likeNumber }}</text>
          <text class="data-label">关注</text>
        </navigator>
        <navigator hover-class="none" url=" ">
          <text class="data-number">{{ userInfo.score }}</text>
          <text class="data-label">积分</text>
        </navigator>
        <navigator hover-class="none" url=" ">
          <text class="data-number">{{ userInfo.couponNumber }}</text>
          <text class="data-label">优惠券</text>
        </navigator>
      </view>
      <!-- 此处省略前面小节代码... -->

      <!-- 药品订单 -->
      <custom-section show-arrow title="药品订单">
        <template #right>
          <navigator hover-class="none" url=" "> 全部订单 </navigator>
        </template>
        <view class="drug-order">
          <navigator hover-class="none" url=" ">
            <uni-badge
              :text="userInfo?.orderInfo?.finishedNumber"
              :offset="[3, 3]"
              absolute="rightTop"
            >
              <image src="/static/images/order-status-1.png" class="status-icon" />
            </uni-badge>
            <text class="status-label">已完成</text>
          </navigator>
          <navigator hover-class="none" url=" ">
            <uni-badge :text="userInfo?.orderInfo?.paidNumber" :offset="[3, 3]" absolute="rightTop">
              <image src="/static/images/order-status-2.png" class="status-icon" />
            </uni-badge>
            <text class="status-label">待付款</text>
          </navigator>
          <!-- 声明式导航 hover-class="none" 没有点击态效果 -->
          <navigator hover-class="none" url=" ">
            <uni-badge
              :text="userInfo?.orderInfo?.receivedNumber"
              :offset="[3, 3]"
              absolute="rightTop"
            >
              <image src="/static/images/order-status-3.png" class="status-icon" />
            </uni-badge>
            <text class="status-label">待发货</text>
          </navigator>
          <navigator hover-class="none" url=" ">
            <uni-badge
              :text="userInfo?.orderInfo?.shippedNumber"
              :offset="[3, 3]"
              absolute="rightTop"
            >
              <image src="/static/images/order-status-4.png" class="status-icon" />
            </uni-badge>
            <text class="status-label">待收货</text>
          </navigator>
        </view>
      </custom-section>

      <!-- 快捷工具 -->
      <custom-section title="快捷工具">
        <uni-list :border="false">
          <uni-list-item
            :border="false"
            title="我的问诊"
            show-arrow
            show-extra-icon
            :extra-icon="{
              type: 'icon-symbol-tool-01',
            }"
          />
          <uni-list-item
            :border="false"
            title="我的处方"
            show-arrow
            show-extra-icon
            :extra-icon="{
              type: 'icon-symbol-tool-02',
            }"
          />
          <uni-list-item
            :border="false"
            title="家庭档案"
            show-arrow
            show-extra-icon
            to="/subpkg_archive/list/index"
            :extra-icon="{
              type: 'weixin', // 图标名字
            }"
          />
          <uni-list-item
            :border="false"
            title="地址管理"
            show-arrow
            show-extra-icon
            :extra-icon="{
              type: 'icon-symbol-tool-04',
            }"
          />
          <uni-list-item
            :border="false"
            title="我的评价"
            show-arrow
            show-extra-icon
            :extra-icon="{
              type: 'icon-symbol-tool-05',
            }"
          />
          <uni-list-item
            :border="false"
            title="官方客服"
            show-arrow
            show-extra-icon
            :extra-icon="{
              type: 'icon-symbol-tool-06',
            }"
          />
          <uni-list-item
            :border="false"
            title="设置"
            show-arrow
            show-extra-icon
            :extra-icon="{
              type: 'icon-symbol-tool-07',
            }"
          />
        </uni-list>
      </custom-section>

      <!-- 退出登录 -->
      <view class="logout-button" @click="logout">退出登录</view>
    </view>
  </scroll-view>
</template>

<style lang="scss">
  @import './index.scss';
</style>
